<template>
	<div class="homePage">
		<!-- 首页轮播开始 -->
		<van-swipe :autoplay="3000" class="swiper">
			<van-swipe-item>
				<img src="../assets/img/top_image1.jpg" alt="#">
			</van-swipe-item>
			<van-swipe-item>
				<img src="../assets/img/top_image2.jpg" alt="#">
			</van-swipe-item>
			<van-swipe-item>
				<img src="../assets/img/top_image3.jpg" alt="#">
			</van-swipe-item>
		</van-swipe>
		<!-- 首页轮播结束 -->
		<!-- 新闻滚动开始 -->
		<div class="swiperNews">
			<van-notice-bar class="van-news-bar"
				text="西电开设区块链技术与开发创新创业公开课，《区块链技术原理与开发实战》在南校区办公楼210报告厅开讲，副校长石光明出席并讲话，600余明学生报名聆听这第一讲。"
			/>
			<img src="../assets/img/111.png" alt="#" class="notice">
		</div>
		<!-- 新闻滚动结束 -->
		<!-- 功能选择tab开始 -->
		<div class="icon-module">
			<div class="icon-all">
					<div class="icon-btn" v-for="(item,index) in chooseIcon" :key="index" @click="detailPage(index)">
						<i class="iconfont" :class="item.imgFontClass"></i>
						<p>{{ item.name}}</p>
					</div>
				<div class="icon-btn" @click="moreIcon">
					<i class="iconfont icon-gengduo"></i>
					<p>更多功能</p>
				</div>
			</div>
		</div>
		<!-- 功能选择tab结束 -->
		<!-- 更多功能弹出层开始 -->

		
		<!-- 更多功能弹出层结束 -->
		<!-- 新闻列表开始 -->
		<div class="newsInfo">
			<div class="newsInfo-nav">
				<p class="news-title">近日新闻</p>
				<div class="moreNews">
					<span @click="goNews">更多</span>
					<i class="iconfont icon-gengduo1"></i>
				</div>
			</div>
			<div @click="goNewsDetail(index)" v-for="(item,index) in newsArtical" :key="index">
				<van-card
					:title="item.title"
					:thumb="item.img" class="news-item"
				>
				<!-- imgUrl.url -->
					<div slot="footer">
						<p class="news-time">{{ item.time }}</p>
						<p class="news-hits">{{ item.views }}</p>
					</div>
				</van-card>
			</div>
			
			<!-- <van-card
				title="西电召开2018年上半年工作会议安排部署重点工作"
				:thumb="imgUrl.url" class="news-item"
			>
				<div slot="footer">
					<p class="news-time">18-04-03 18:01</p>
					<p class="news-hits"> 21次</p>
				</div>
			</van-card>
			<van-card
				title="西电召开2018年上半年工作会议安排部署重点工作"
				:thumb="imgUrl.url" class="news-item"
			>
				<div slot="footer">
					<p class="news-time">18-04-03 18:01</p>
					<p class="news-hits"> 21次</p>
				</div>
			</van-card> -->
		</div>
		<!-- 新闻列表结束 -->
	</div>
</template>

<script>
import Vue from "vue";

import Qs from 'qs'
import axios from 'axios'
import store from "../common/store";

import { Swipe, SwipeItem } from "vant";
import { NoticeBar } from "vant";
import { Popup } from "vant";
import { Card } from "vant";
import { Toast } from "mint-ui";

Vue.use(Card);
Vue.use(Popup);
Vue.use(NoticeBar);
Vue.use(Swipe).use(SwipeItem);
window.data = {
  chooseIcon: [
    {
			name: "学生课表",
			EnName: "schedule",
			imgFontClass: "icon-kebiaoxinxi",
			flag: true
		},
    {
      name: "校车时刻",
      EnName: "carList",
      imgFontClass: "icon-bus",
      flag: true
    },
    // {
    //   name: "校园交易",
    //   EnName: "deal",
    //   imgFontClass: "icon-iconfontzhizuobiaozhunbduan27",
    //   flag: true
    // },
    {
      name: "流量查询",
      EnName: "flow",
      imgFontClass: "icon-liuliangtongji",
      flag: true
    },
    {
      name: "校内电话",
      EnName: "phone",
      imgFontClass: "icon-dianhua",
      flag: true
    },
    {
      name: "西电新闻",
      EnName: "news",
      imgFontClass: "icon-news",
      flag: true
    },
    {
      name: "成绩查询",
      EnName: "score",
      imgFontClass: "icon-genjufenshuxuandaxuen",
      flag: true
    },
    {
      name: "校园招聘",
      EnName: "jobs",
      imgFontClass: "icon-zhaopin",
      flag: true
    }
  ]
    // {
    //   name: "生活服务",
    //   EnName: "lifeServe",
    //   imgFontClass: "icon-shenghuofuwu",
    //   flag: true
    // }
  //   {
  //     name: "地图查询",
  //     EnName: "map",
  //     imgFontClass: "icon-ditu",
  //     flag: true
  //   },
  // ]
};
export default {
  data() {
    return {
      count: 0,
      isLoading: false,
      show: false,
      toggleBtn: false,
      isShowcircle: false,
      activeIcon: "",
      warnToast: false,
      // imgUrl: {
      //   url1:
			// 		"//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg",
			// 	url2:"../assets/img/minus.png",	
			// },
			newsArtical:[
				{
					title:'陕西尚品信息科技有限公司科研人员正在调试宽带自组网传输系统',
					time:'18-04-03 18:01',
					views:'21次',
					img:"//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"
				},
				{
					title:'西安市工信委来校调研人工智能工业研究院建设',
					time:'18-04-06 21:41',
					views:'32次',
					img:"//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"
				},
				{
					title:'西电两个实验室在教育部重点实验室评估中获优',
					time:'18-04-12 09:32',
					views:'44次',
					img:"//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"
				}
				
			],
      chooseIcon: window.data.chooseIcon,
      choosingIcon: [
        {
          name: "西电新闻",
          EnName: "news",
          imgFontClass: "icon-news",
          flag: true
        },
        {
          name: "学生课表",
          EnName: "schedule",
          imgFontClass: "icon-kebiaoxinxi",
          flag: true
        },
        {
          name: "地图查询",
          EnName: "map",
          imgFontClass: "icon-ditu",
          flag: true
        },
        // {
        //   name: "生活服务",
        //   EnName: "lifeServe",
        //   imgFontClass: "icon-shenghuofuwu",
        //   flag: false
        // },
        // {
        //   name: "校园交易",
        //   EnName: "deal",
        //   imgFontClass: "icon-iconfontzhizuobiaozhunbduan27",
        //   flag: true
        // },
        {
          name: "流量查询",
          EnName: "flow",
          imgFontClass: "icon-liuliangtongji",
          flag: true
        },
        {
          name: "成绩查询",
          imgFontClass: "icon-genjufenshuxuandaxuen",
          flag: true
        },
        {
          name: "校内电话",
          EnName: "phone",
          imgFontClass: "icon-dianhua",
          flag: true
        },
        {
          name: "校车时刻",
          EnName: "carList",
          imgFontClass: "icon-bus",
          flag: true
        }
      ]
    };
  },
  created() {
    this.chooseIcon = window.data.chooseIcon;
    let channel = {channel:'xidianccapp'}
    axios({
      method: 'post',
      url: 'https://jsfz.meetingcn.org/campus/key.php',
      transformRequest: [function (data) {
        data = Qs.stringify(data)  //序列化参数
        return data
      }],
      data:channel,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    }).then( res =>{
      console.log(res.msg)
      store.commit('user_accesskey', res.msg);  //数据提交到vuex管理
    }).catch(function (error) {
      console.log(error);
    });
  },
  beforeUpdate() {
    if (this.chooseIcon.length >= 7) {
      this.overNumber = true;
      console.log("over");
    }
  },
  methods: {
		goNewsDetail (index){
			console.log(1)
			index++
			this.$router.push('/index/newsArtical'+index)
		},
		goNews (){
			this.$router.push('/index/newsDetail')
		},
    moreIcon() {
      // this.show = true
      // this.$router.go('feature')
      this.$router.push({ path: "/index/feature" });
    },
    onClickLeft() {
      this.show = false;
      this.toggleBtn = false;
      this.isShowcircle = false;
      this.activeIcon = "";
    },
    onClickRight() {
      this.show = false;
      this.toggleBtn = false;
      this.isShowcircle = false;
      this.activeIcon = "";
    },
    confirmBtn() {
      this.toggleBtn = !this.toggleBtn;
      this.isShowcircle = !this.isShowcircle;
      this.activeIcon = "";
    },
    changeBtn() {
      this.toggleBtn = !this.toggleBtn;
      this.isShowcircle = !this.isShowcircle;
      this.activeIcon = "activeIcon";
    },
    toggleIcon(index) {
      this.schoolLifeIcon[index].flag = !this.schoolLifeIcon[index].flag;
    },
    toggleIcon1(index) {
      this.aboutSchoolIcon[index].flag = !this.aboutSchoolIcon[index].flag;
    },
    detailPage(index) {
      //路由跳转
      console.log(this.chooseIcon[index]);
      this.$router.push("/index/" + this.chooseIcon[index].EnName + "Detail");
    },
    wipeIcon(event, index) {
      if (this.activeIcon) {
        event.cancelBubble = true;
        let a = this.chooseIcon.splice(index, 1);
        // console.log(a[0].name)
        for (let value of this.schoolLifeIcon) {
          if (value.name == a[0].name) {
            value.flag = !value.flag;
          }
        }
        for (let value of this.aboutSchoolIcon) {
          if (value.name == a[0].name) {
            value.flag = !value.flag;
          }
        }
      }
    },
    addIcon1(index) {
      if (this.schoolLifeIcon[index].flag) {
        //当icon为减号时，可执行减少操作，overNumber失效
        this.overNumber = false;
        this.warnToast = false;

        let m = this.chooseIcon.indexOf(this.schoolLifeIcon[index]);
        this.chooseIcon.splice(m, 1);
      }
      if (this.overNumber) {
        this.warnToast = true;
        console.log(1);
        Toast("Upload Complete", "toastCss");
        return;
      }
      // console.log(event.target.parentNode.parentNode.parentNode.id)
      // if(chooseIcon.length>=7){
      // 	this.warnToast = true
      // }else{
      if (!this.schoolLifeIcon[index].flag) {
        this.chooseIcon.push(this.schoolLifeIcon[index]);
        // this.toggleIcon(index)
      }
      this.toggleIcon(index);
      // else{
      // 	let m = this.chooseIcon.indexOf(this.schoolLifeIcon[index])
      // 	this.chooseIcon.splice(m,1)
      // }
    },
    addIcon2(index) {
      if (this.aboutSchoolIcon[index].flag) {
        this.chooseIcon.push(this.aboutSchoolIcon[index]);
      } else {
        let m = this.chooseIcon.indexOf(this.aboutSchoolIcon[index]);
        this.chooseIcon.splice(m, 1);
      }
    },
    open() {
      console.log(1);
    }
  },
  watch: {
    chooseIcon: {
      handler() {
        window.data.chooseIcon = this.chooseIcon;
      },
      deep: true
    }
  }
};
</script>

<style scoped>
/* @import url(//at.alicdn.com/t/font_615648_hhvoa5zm9z52ke29.css); */
/* @import url(//at.alicdn.com/t/font_615648_6em2ctbz55ewmi.css); */
.swiper {
  width: 100%;
  height: 180px;
}
.swiper img {
  width: 100%;
  height: 200px;
}
.van-news-bar {
  margin-top: 3px;
  padding-left: 25px;
}
.swiperNews {
  position: relative;
}
.notice {
  position: absolute;
  left: 0;
  top: 5px;
  width: 25px;
  height: 25px;
}
/* .icon-module {
  width: 100%;
  margin-top: 2px;
} */
.icon-all {
  width: 100%;
  margin-top:2px;
  height: 160px;
  background: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
i {
  display: block;
  font-size: 30px;
  text-align: center;
  margin-top: 8px;
}
.moreNews i{
  float:right;
  font-size: 100%;
  line-height: 40px;
  margin-top:0;
  margin-right: 5px;
}
.icon-btn {
  width: 25%;
  height: 65px;
  position: relative;
  text-align: center;
  margin-top: 8px;
}
.icon-btn .activeIcon {
  width: 85%;
  height: 60px;
  border-radius: 5px;
  background: #eee;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 5px;
}

.fillIcon,
.minusIcon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 6%;
}
.fillIcon {
  background: url("../assets/img/fill.png") top/12px no-repeat;
}
.minusIcon {
  background: url("../assets/img/minus.png") top/12px no-repeat;
}
/* .icon-btn:hover{
	background: #eee;
} */
.icon-btn p {
  font-size: 12px;
  margin-top: 6px;
  /* position: absolute;
	bottom: 2px;
	left: 0; */
}
.icon-news {
  color: blue;
}
.icon-kebiaoxinxi {
  color: orange;
}
.icon-ditu {
  color: mediumspringgreen;
}
.icon-shenghuofuwu {
  color: maroon;
}
.icon-iconfontzhizuobiaozhunbduan27 {
  color: magenta;
}
.icon-dianhua {
  color: rgb(22, 115, 236);
}
.icon-bus {
  color: darkblue;
}
.icon-gengduo {
  color: red;
}
.icon-genjufenshuxuandaxuen {
  color: blueviolet;
}
.icon-shiwuzhaoling {
  color: rgb(180, 109, 232);
}
.icon-zhaopin{
  color: red;
}
.icon-liuliangtongji{
  color: rgb(68, 187, 0);
}
.icon-xiezuo {
  color: greenyellow;
}
.icon-yinhangqia {
  color: rgb(22, 115, 236);
}
.icon-weibo {
  color: red;
}
.icon-weixiu {
  color: rgb(180, 109, 232);
}
.Popright {
  width: 100%;
  height: 100%;
  background: #eee;
}
/* icon浮层 */
/* .IconNav {
  width: 100%;
  height: 35px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  line-height: 35px;
  padding-left: 10px;
  background: white;
  margin-top: 2px;
} */
/* .IconNav .replaceIcon {
  float: right;
  margin-right: 15px;
  color: blue;
}
.IconContent {
  width: 100%;
  height: 150px;
  background: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1 auto;
} */

/* 近日新闻 */
.newsInfo {
  width: 100%;
  /* height: 300px; */
  margin-top: 6px;
  background: white;
}
.newsInfo .newsInfo-nav {
  width: 100%;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.newsInfo .newsInfo-nav .news-title {
  width: 80px;
  float: left;
  text-align: center;
  line-height: 40px;
  padding-left: 10px;
}
.moreNews {
  float: right;
  padding-right: 6px;
  font-size: 14px;
  line-height: 40px;
}
.moreNews i {
  font-size: 16px;
  line-height: 40px;
}
.news-item {
  background: white;
  border-bottom: 1px solid #ccc;
  margin-top: 5px;
}
.news-time {
  float: left;
  font-size: 14px;
  color: #999;
  margin-right: 90px;
}
.news-hits {
  float: right;
  color: #999;
  font-size: 14px;
}
</style>